$indigo: #3023ae;
$iris: #53a0fe;
$lime: #b4ed50;

$codepen: #fcd000;
$github: #4183c4;

$f: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$p: 12px;

*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: $p;
	background: mix($iris, $lime);
	background: linear-gradient(135deg, $indigo 0%, $iris 50%, $lime 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$indigo', endColorstr='$lime',GradientType=1 );
	font-family: $f;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

ul {
	perspective: 1000px;
	transform: translateZ(#{$p*8});
	display: flex;
	list-style: none;
	margin: 0;
	padding: $p;
	li {
		padding: $p;
	}
}

.clips {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	z-index: -100;
}

.link {
	position: relative;
	width: $p*8;
	height: $p*8;
	a {
		transform-origin: $p*4 $p*4 -#{$p*4};
		display: block;
		position: absolute;
		z-index: 1;
		transform: translateZ(#{$p*2});
		width: 100%;
		height: 100%;
		&:nth-child(1) {
			top: 0;
			left: 0;
			height: 50%;
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			@-moz-document url-prefix() {
				clip-path: url(#clip-top);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateX(-0.5turn);
					div:nth-child(6) {
						transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8);
					}
				}
			}
		}
		&:nth-child(2) {
			top: 0;
			right: 0;
			width: 50%;
			clip-path: polygon(100% 100%, 0 50%, 100% 0);
			@-moz-document url-prefix() {
				clip-path: url(#clip-right);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateY(-0.5turn);
				}
			}
		}
		&:nth-child(3) {
			bottom: 0;
			right: 0;
			height: 50%;
			clip-path: polygon(0 100%, 50% 0, 100% 100%);
			@-moz-document url-prefix() {
				clip-path: url(#clip-bottom);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateX(0.5turn);
					div:nth-child(6) {
						transform: rotateY(180deg) rotateZ(180deg) translateZ($p*8);
					}
				}
			}
		}
		&:nth-child(4) {
			bottom: 0;
			left: 0;
			width: 50%;
			clip-path: polygon(0 100%, 0 0, 100% 50%);
			@-moz-document url-prefix() {
				clip-path: url(#clip-left);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateY(0.5turn);
				}
			}
		}
		&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
			&:hover, &:focus {
				z-index: 2;
				transform: translateZ(#{$p*3});
				width: 100%!important;
				height: 100%!important;
				-webkit-clip-path: none!important;
				clip-path: none!important;
				transition: all 100ms ease 500ms;
			}
		}
	}
}

.cube {
	transform-origin: $p*4 $p*4 -#{$p*4};
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: all 300ms ease-out;
	div {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: white;
		// border-radius: 3px;
		svg {
			width: $p*4;
			height: $p*4;
			path:not(.fill) {
				fill: none;
				stroke: white;
				stroke-width: 5px;
				stroke-linecap: round;
				stroke-linejoin: round;
			}
			path.fill {
				fill: white;
			}
		}
		// top
		&:nth-child(1) {
			transform-origin: center top;
			transform: rotateX(90deg) translateY(#{-($p*8)});
		}
		// bottom
		&:nth-child(2) {
			transform-origin: center bottom;
			transform: rotateX(-90deg) translateY($p*8);
		}
		// left
		&:nth-child(3) {
			transform-origin: left center;
			transform: rotateY(-90deg) translateX(#{-($p*8)});
		}
		// right
		&:nth-child(4) {
			transform-origin: right center;
			transform: rotateY(90deg) translateX($p*8);
		}
		// front
		&:nth-child(5) {
			transform-origin: center center;
			transform: rotateX(0);
		}
		// back
		&:nth-child(6) {
			transform-origin: center center;
			transform: rotateY(180deg) translateZ($p*8);
		}
	}
	&.codepen {
		div {
			// top
			&:nth-child(1) {
				background: lighten($codepen, 35%);
			}
			// bottom
			&:nth-child(2) {
				background: lighten($codepen, 10%);
			}
			// left
			&:nth-child(3) {
				background: lighten($codepen, 20%);
			}
			// right
			&:nth-child(4) {
				background: lighten($codepen, 20%);
			}
			// front
			&:nth-child(5) {
				background: $codepen;
			}
			// back
			&:nth-child(6) {
				background: white;
				color: $codepen;
			}
		}
	}
	&.github {
		div {
			// top
			&:nth-child(1) {
				background: lighten($github, 35%);
			}
			// bottom
			&:nth-child(2) {
				background: lighten($github, 10%);
			}
			// left
			&:nth-child(3) {
				background: lighten($github, 20%);
			}
			// right
			&:nth-child(4) {
				background: lighten($github, 20%);
			}
			// front
			&:nth-child(5) {
				background: $github;
			}
			// back
			&:nth-child(6) {
				background: white;
				color: $github;
			}
		}
	}
}